import { useRef, useImperativeHandle, forwardRef } from 'react';
import Bpmn from './Bpmn';
import './style.less';
import 'diagram-js/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-js.css';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

interface processDesignerProps {
  processId?: string;
  page?: any;
  style?: any;
};

const ProcessDesigner = forwardRef((props: processDesignerProps, ref) => {
  const { processId, page, style } = props;
  const bpmnRef = useRef<any>();

  useImperativeHandle(ref, () => ({
    getReleaseParams: bpmnRef?.current?.getReleaseParams,
    getSaveParams: bpmnRef?.current?.getSaveParams,
    openVer: bpmnRef?.current?.openVer,
    setVariable: bpmnRef?.current?.setVariable,
  }));

  return (
    <div className="process-designer-wrapper" style={style}>
      <Bpmn ref={bpmnRef} processId={processId || ''} page={page} />
    </div>
  );
});

export default ProcessDesigner;